<template>
	<view>
		<view class="add-cover position-relative">
			<image class="cover" :src="form.cover" mode="aspectFill"></image>
			<view class="add-btn flex flex-column align-center justify-center position-absolute text-muted"
				@click="onAddCover">
				<text class="iconfont iconjia font-lg"></text>
				<text>点击{{form.cover ? '切换':'添加'}}封面图</text>
			</view>
		</view>
		<form-label label="标题">
			<input class="uni-input" type="text" v-model="form.title" placeholder="请填写视频标题" />
		</form-label>
		<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
			<form-label label="分类" arrow>
				<input class="uni-input" :disabled="true" type="text" v-model="form.class" placeholder="请选择视频分类" />
			</form-label>
		</picker>
		<form-label label="描述">
			<view class="px-3 pt-1 w-100">
				<textarea class="uni-textarea" v-model="form.desc" placeholder="请填写视频描述..."></textarea>
			</view>
		</form-label>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				array: [{
					name: '中国'
				}, {
					name: '美国'
				}, {
					name: '巴西'
				}, {
					name: '日本'
				}],
				form: {
					cover: '',
					title: '',
					class: '',
					desc: ''
				},
			};
		},
		methods: {
			onAddCover() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						this.form.cover = res.tempFilePaths[0];
					}
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index = e.detail.value;
				this.form.class = this.array[this.index].name;
			},
		}
	}
</script>

<style lang="scss">
	.add-cover {
		width: 100%;
		height: 340rpx;
		background-color: #F7F9FB;

		.cover {
			width: 100%;
			height: 340rpx;
		}

		.add-btn {
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			background-color: rgba(255, 255, 255, 0.3);
		}
	}
</style>